@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
html {
  @apply text-[62.5%] bg-html;
}
body {
  @apply text-[1.2rem] md:text-[1.4rem] lg:text-[1.6rem] text-text;
}

h1, h2, h3, h4, h5, h6 {
  @apply font-serif font-bold text-heading;
}
h1{
  @apply text-[3rem] md:text-[3.5rem] lg:text-[4rem] xl:text-[4.5rem];
}
h2{
  @apply text-[2.4rem] md:text-[2.8rem] lg:text-[3.2rem] xl:text-[3.6rem];
}
h3{
  @apply text-[2rem] md:text-[2.2rem] lg:text-[2.4rem] xl:text-[2.8rem];
}
.container {
  @apply px-sm md:px-0 max-w-[120rem] m-auto;
}
.container-article {
  @apply px-sm md:px-0 max-w-[80rem] m-auto;
}

.card--hover{
  @apply cursor-pointer;
}
.card--hover:hover .h3{
  @apply !text-primary;
}
.card--active{
  @apply active:opacity-50;
}

.link--hover{
  @apply cursor-pointer hover:text-primary;
}
.link--active{
  @apply active:opacity-50;
}
.link{
  @apply link--hover link--active;
}
.btn--hover{
  @apply cursor-pointer hover:opacity-80;
}
.btn--active{
  @apply active:opacity-50;
}
.btn{
  @apply btn--hover btn--active border border-primary bg-primary text-white py-1 px-8;
}
.btn--success{
  @apply bg-success text-white border-success;
}
.btn--error{
  @apply bg-error text-white border-error;
}
.btn--warning{
  @apply bg-warning text-white border-warning;
}
.btn--info{
  @apply bg-info text-white border-info;
}
.btn--outline{
  @apply !border-primary text-primary bg-transparent;
}
.btn--success.btn--outline{
  @apply !border-success !text-success;
}
.btn--error.btn--outline{
  @apply !border-error !text-error;
}
.btn--warning.btn--outline{
  @apply !border-warning !text-warning;
}
.btn--info.btn--outline{
  @apply !border-info !text-info;
}
/* 文章 */
.article {
  @apply pb-lg;
}
.article h2, .article h3, .article p {
  @apply pt-md;
}

/* 特殊类 */
.btn{
  @apply hover:opacity-80 active:opacity-50 cursor-pointer;
}
.btn-card{
  @apply hover:shadow-md active:bg-gray cursor-pointer;
}
.line-clamp-1 {
  @apply whitespace-nowrap overflow-hidden text-ellipsis;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}